<template>
    <!--地图挂载dom-->
    <div id="map">
    </div>
</template>

<script>
    //引入依赖
    import Map from 'ol/Map';
    import {TileArcGISRest,XYZ} from 'ol/source';
    import View from 'ol/View';
    import {Tile as TileLayer} from 'ol/layer';
    import {fromLonLat} from 'ol/proj';
    export default {
        name: "ArcgisTileLayer",
        data() {
            return {
            }
        },
        mounted() {

            //加载arcgis的MapServer地图
            //arcgis的地图影像都是通过地图影像切片，将数据裁切成512*512/256*256的大小的图片，加载
            const arcgisMapServerLayer = new TileLayer({
                source:   new TileArcGISRest({
                    url: 'https://server.arcgisonline.com/arcgis/rest/services/World_Imagery/MapServer'
                }),
            });

            let  arcgisTileLayer = new TileLayer({
                source: new XYZ({
                    url: 'http://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer/tile/{z}/{y}/{x}',
                })
            })

            this.map = new Map({
                layers: [/*arcgisMapServerLayer*/,arcgisTileLayer],
                target: 'map',
                view: new View({
                    center: fromLonLat([87.16552734375, 39.470125122358176]),
                    zoom: 5,
                }),
            });
        },
    }
</script>

<style scoped>

</style>